<template>
    <div class="payment-module">
        <h2>支付信息</h2><br>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="paymentMethod">支付方式:</label>
                <select v-model="paymentMethod" id="paymentMethod" required>
                    <option value="creditCard">信用卡</option>
                    <option value="paypal">PayPal</option>
                    <option value="bankTransfer">银行转账</option>
                </select>
                <p v-if="fieldErrors.paymentMethod" class="error-message">{{ fieldErrors.paymentMethod }}</p>
            </div>

            <div v-if="paymentMethod === 'creditCard'" class="credit-card-info">
                <div class="form-group">
                    <label for="cardNumber">卡号:</label>
                    <Field name="cardNumber" v-model="creditCardInfo.cardNumber" :rules="['required']" type="text" id="cardNumber" />
                    <p v-if="fieldErrors.cardNumber" class="error-message">{{ fieldErrors.cardNumber }}</p>
                </div>
                <div class="form-group">
                    <label for="cardName">持卡人姓名:</label>
                    <Field name="cardName" v-model="creditCardInfo.cardName" :rules="['required']" type="text" id="cardName" />
                    <p v-if="fieldErrors.cardName" class="error-message">{{ fieldErrors.cardName }}</p>
                </div>
                <div class="form-group">
                    <p v-if="fieldErrors.expiryDate" class="error-message">{{ fieldErrors.expiryDate }}</p>
                    <label for="expiryDate">有效期:</label>
                    <Field name="expiryDate" v-model="creditCardInfo.expiryDate" :rules="['required']" type="text" id="expiryDate" placeholder="MM/YY" />
                </div>
                <div class="form-group">
                    <label for="cvv">CVV:</label>
                    <Field name="cvv" v-model="creditCardInfo.cvv" :rules="['required']" type="text" id="cvv" />
                    <p v-if="fieldErrors.cvv" class="error-message">{{ fieldWords.cvv }}</p>
                </div>
            </div>

            <div class="form-group">
                <label for="amount">支付金额:</label>
                <Field name="amount" v-model="amount" :rules="['required']" type="number" id="amount" />
                <p v-if="fieldErrors.amount" class="error-message">{{ fieldErrors.amount }}</p>
            </div>

            <button type="category">支付</button>
        </form>

        <div v-if="message.value" class="message">
            {{ message.value }}
        </div>
    </div>
</template>
    
    <script setup>
   import { ref, reactive } from 'vue';
import { useForm, Field, defineRule, configure } from 'vee-validate';
import { required } from '@vee-validate/rules';
// 定义验证规则
defineRule('required', required);

// 配置vee-validate，设置默认的验证消息语言等
configure({
    generateMessage: (cotext) => {
        const messages = {
            required: `${cotext.field}是必填项`
        };
        return messages[cotext.rule.name];
    }
});

// 使用ref声明简单类型的数据
const paymentMethod = ref('');
const amount = ref('');
const message = ref('');

// 使用reactive声明复杂类型的数据（对象）
const creditCardInfo = reactive({
    cardNumber: '',
    cardName: '',
    expiryDate: '',
    cvv: ''
});

// 用于存储每个字段的错误消息
const fieldErrors = reactive({
    paymentMethod: '',
    cardNumber: '',
    cardName: '',
    expiryDate: '',
    cvv: '',
    amount: ''
});

const handleSubmit = () => {
    const { isValid, errors } = useForm({
        initialValues: {
            paymentMethod: paymentMethod.value,
            cardNumber: creditCardInfo.cardNumber,
            cardName: creditCardInfo.cardName,
            expiryDate: creditCardInfo.expiryDate,
            cvv: creditCardInfo.cvv,
            amount: amount.value
        }
    });

    if (!isValid.value) {
        // 将验证错误消息更新到对应的字段错误消息中
        errors.value.forEach((error) => {
            fieldErrors[error.field] = error.message;
        });
        return;
    }

    // 假设支付成功
    message.value = '支付成功！';
    // 清除表单数据
    resetForm();
};

const resetForm = () => {
    paymentMethod.value = '';
    amount.value = '';
    message.value = '';
    creditCardInfo.cardNumber = '';
    creditCardInfo.cardName = '';
    creditCardInfo.expiryDate = '';
    creditCardInfo.cvv = '';
    fieldErrors.paymentMethod = '';
    fieldErrors.cardNumber = '';
    fieldErrors.cardName = '';
    fieldErrors.expiryDate = '';
    fieldErrors.cvv = '';
    fieldErrors.amount = '';
};

   
    </script>
    
  <style scoped>  
  .payment-module {  
    max-width: 500px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
  }  
    
  .form-group {  
    margin-bottom: 15px;  
  }  
    
  .form-group label {  
    display: block;  
    margin-bottom: 5px;  
  }  
    
  .form-group input {  
    width: 100%;  
    padding: 8px;  
    box-sizing: border-box;  
  }  
    
  .credit-card-info {  
    border-top: 1px solid #eee;  
    padding-top: 15px;  
    margin-top: 15px;  
  }  
    
  .message {  
    color: green;  
    margin-top: 20px;  
  }  .error-message {
    color: red;
    margin-top: 5px;
    font-size: 12px;
}
  </style>